<style scoped lang="less">
.container {
    min-height: 100%;
}
.querybox {
    background: #FFF;
    overflow: hidden;
}
.querylist {
    margin: 10px;
    padding: 10px 5px;
    display: flex;
    flex-flow: column nowrap;
    .querytitle {
        display: flex;
        justify-content: space-between;
        .ordernum {
            font-weight: 700;
        }
        .ordertype {
            color: #dd2828;
            font-weight: 700;
        }
    }
    .queryinfos {
        margin-top: 15px;
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        text-align: left;
        .goodspic {
            width: 20%;
            flex: 0 1 auto;
            position: relative;
            img {
                width: 100%;
            }
            .mask {
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.1);
                position: absolute;
                left: 0;
                top: 0;
            }
        }
        .orderitem {
            width: 63%;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            p {
                // text-overflow: ellipsis;
                // overflow: hidden;
                // white-space: nowrap;
                padding-left: 10px;
                line-height: 18px;
                &.e_name {
                    font-weight: 700;
                    font-size: 12px;
                }
                &.c_name {
                    font-weight: 700;
                    font-size: 12px;
                }
                &.size {
                    color: #999;
                    padding-top: 5px;
                }
            }
        }
        .orderprice {
            width: 17%;
            flex: 0 1 auto;
            font-size: 12px;
            text-align: right;
            p {
                padding-bottom: 20px;
            }
        }
    }
    .allprice {
        padding-top: 10px;
        font-weight: 700;
        line-height: 24px;
        text-align: right;
    }
    .orderaction {
        display: flex;
        justify-content: flex-end;
        margin: 5px 0;
        a {
            width: 60px;
            height: 24px;
            line-height: 24px;
            border: 1px solid #ccc;
            margin-left: 10px;
            text-align: center;
        }
        a.paystyle {
            color: #f66262;
            border: 1px solid #efaeae;
        }
        .backpay {
            color: #434343;
            border: 1px solid #999;
        }
    }
}
</style>
<template>
<div class="container">
  <loading :show="isLoading" text="请稍候"></loading>
  <x-header title="我的订单"></x-header>
  <tab v-model="index" :value="queryindex" :line-width="1" custom-bar-width="40px" :animate="false">
    <tab-item selected @on-item-click="onItemClick">待付款</tab-item>
    <tab-item @on-item-click="onItemClick">待收货</tab-item>
    <tab-item @on-item-click="onItemClick">已完成</tab-item>
  </tab>

  <div class="querybox" v-if="index==0">
    <div class="querylist vux-1px-b" v-for="(item, index) in orderList" :key="index">
      <div class="querytitle"><span class="ordernum">订单编号：{{ item.订单id }}</span><span class="ordertype">{{ item.商品name }}</span></div>
      <div class="queryinfos">
        <span class="goodspic">
						<div class="mask"></div>
						<img :src="item.image" alt="">
				</span>
        <span class="orderitem">
						<p class="e_name">{{ item.商品name }}</p>
						<p class="c_name">{{ item.商品规格 }}</p>
						<!-- <p class="size">黑色 M</p> -->
				</span>
        <span class="orderprice">
						<p>￥{{ item.单价 }}</p>
						<p>x{{ item.数量 }}</p>
					</span>
      </div>
      
      <div class="allprice">
        合计：￥{{ item.总价 }} （共{{ item.数量 }}件）
      </div>
      <div class="orderaction">
        <a class="backpay" @click="orderConfirm(item.订单id)">取消订单</a>
        <a class="paystyle" @click="pay(item.订单id)">去付款</a>
      </div>
    </div>

    <div style="text-align:center" v-if="orderList.length < 1">
        <p style="width:100px; height:auto;overflow:hidden; margin:20px auto;"><img src="../../../static/images/none2.png" width="80" alt=""></p>
        <p style="font-weight:bold; color:#999; font-size:14px;">抱歉未查到数据~</p>
        <box gap="20px 10px"><x-button type="warn" link='/' style="border-radius:10px; font-weight:bold; font-size:14px;">去逛逛</x-button></box>
      </div>

  </div>

  <div class="querybox" v-else-if="index==1">
    <div class="querylist vux-1px-b" v-for="(item, index) in orderList" :key="index">
      <div class="querytitle"><span class="ordernum">订单编号：{{ item.订单id }}</span><span class="ordertype">{{ item.商品name }}</span></div>
      <div class="queryinfos">
        <span class="goodspic">
						<div class="mask"></div>
						<img :src="item.image" alt="">
				</span>
        <span class="orderitem">
						<p class="e_name">{{ item.商品name }}</p>
						<p class="c_name">{{ item.商品规格 }}</p>
						<!-- <p class="size">黑色 M</p> -->
				</span>
        <span class="orderprice">
						<p>￥{{ item.单价 }}</p>
						<p>x{{  item.数量 }}</p>
					</span>
      </div>
      
      <div class="allprice">
        合计：￥{{ item.总价 }} （共{{ item.数量 }}件）
      </div>
      <div class="orderaction">
        <a class="paystyle" @click="readyget(item.订单id)">确认收货</a>
      </div>
    </div>
    <div style="text-align:center" v-if="orderList.length < 1">
        <p style="width:100px; height:auto;overflow:hidden; margin:20px auto;"><img src="../../../static/images/none2.png" width="80" alt=""></p>
        <p style="font-weight:bold; color:#999; font-size:14px;">抱歉未查到数据~</p>
        <box gap="20px 10px"><x-button type="warn" link='/' style="border-radius:10px; font-weight:bold; font-size:14px;">去逛逛</x-button></box>
      </div>
  </div>
  <div class="querybox" v-else>
    <div class="querylist vux-1px-b" v-for="(item, index) in orderList" :key="index">
      <div class="querytitle"><span class="ordernum">订单编号：{{ item.订单id }}</span><span class="ordertype">{{ item.商品name }}</span></div>
      <div class="queryinfos">
        <span class="goodspic">
						<div class="mask"></div>
						<img :src="item.image" alt="">
				</span>
        <span class="orderitem">
						<p class="e_name">{{ item.商品name }}</p>
						<p class="c_name">{{ item.商品规格 }}</p>
						<!-- <p class="size">黑色 M</p> -->
				</span>
        <span class="orderprice">
						<p>￥{{  item.单价 }}</p>
						<p>x{{  item.数量 }}</p>
					</span>
      </div>
      
      <div class="allprice">
        合计：￥{{ item.总价 }} （共{{ item.数量 }}件）
      </div>  
    </div>
    <div style="text-align:center" v-if="orderList.length < 1">
        <p style="width:100px; height:auto;overflow:hidden; margin:20px auto;"><img src="../../../static/images/none2.png" width="80" alt=""></p>
        <p style="font-weight:bold; color:#999; font-size:14px;">抱歉未查到数据~</p>
        <box gap="20px 10px"><x-button type="warn" link='/' style="border-radius:10px; font-weight:bold; font-size:14px;">去逛逛</x-button></box>
      </div>
  </div>

  <!--确认收货-->
  <div v-transfer-dom>
    <confirm v-model="show" title="提示操作" @on-cancel="onCancel" @on-confirm="onConfirm">
			<p style="text-align:center;">是否收到该订单商品？</p>
    </confirm>
  </div>
  <!--取消订单-->
  <div v-transfer-dom>
    <confirm v-model="cancelOrderStatus" title="提示操作" @on-cancel="onOrderCancel" @on-confirm="onSuccessOrderCancel">
			<p style="text-align:center;">确定取消订单？</p>
    </confirm>
  </div>
</div>
</template>
<script>
import { myOrderList, orderCancel, orderConfrim, makeOrder } from '@/api/Goods'
import {
  XHeader,
  Tab,
  TabItem,
  Confirm,
  TransferDom,
  Loading,
  XButton,
  Box
} from 'vux'
export default {
  name: 'query',
  components: {
    XHeader,
    Tab,
    TabItem,
    Confirm,
    Loading,
    XButton,
    Box
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      serverUrl: process.env.SERVER_URL,
      showPopup: false,
      index: 0,
      queryindex: 0,
      show:false,
      isLoading: false,
      type: 'WAITPAY', // 待支付
      orderList: [],
      cancelOrderStatus: false, //控制取消订单状态 
      order_id: '0'
    }
  },
  mounted() {
    var that = this;
    var height = document.querySelectorAll('body')[0].offsetHeight;
    var el = document.querySelectorAll('.querybox')[0];
    el.style.minHeight = height + 'px';

    setTimeout(function() {
      that.index = Number(that.$route.params.id);
    }, 50)
    this.queryindex = this.$route.params.id
    // 调用订单列表
     this.getOrderList();
  },
  methods: {
    vuex_is_sb() {
      this.showPopup = true;
    },
    onItemClick(index) {
    
      if (index < 1) {
        this.type = 'notPay'
      } else if (index == 1) {
        this.type = 'notReceive'
      } else {
        this.type = 'all'
      }
      this.queryindex = index;
      this.getOrderList();
    },
		readyget(e){
      this.order_id = e
			this.show = this.show?false:true;
		},
		onCancel() {
			console.log('Confirm关闭了')
		},
		onConfirm(){
				orderConfrim({a: 'commitOrder', orderId: this.order_id}).then(response => {
          this.getOrderList();
        })
    },

    // 取消订单
    onOrderCancel() {

    },
    onSuccessOrderCancel(e) {
      console.log(this.order_id);
      orderCancel({a: 'delOrder', orderId: this.order_id}).then(response => {
        this.getOrderList()
      });
    },
    orderConfirm(e) {
      this.order_id = e
      console.log(e);
      this.cancelOrderStatus = this.cancelOrderStatus ? false : true;
    },
    // 订单去支付
    pay(order_id) {
      var params = {
        a: 'finishOrder',
        orderId: order_id
      }
      
      makeOrder(params).then(response => {
        console.log(response);
        if (response == 'success') {
          alert('success')
          window.location.href = '/'
        } else {
          window.location.href = response
        }
        
      })

      // this.$router.push({
      //   name: 'pay',
      //   query: { order_id: order_id }
      // })
    },
    // 订单列表
     getOrderList() {
       this.isLoading = true
       if (this.queryindex < 1) {
        this.type = 'notPay'
      } else if (this.queryindex == 1) {
        this.type = 'notReceive'
      } else {
        this.type = 'all'
      }
      console.log(this.type)
       myOrderList({a: 'orderDetail', type: this.type}).then(response => {
         this.orderList = response
         this.isLoading = false
       })
     }
  },


}
</script>
